<template>
  <el-container style="background-color: #fff">
    <el-aside style="padding: 0px 10px 0 0;width:260px; box-sizing: border-box" v-loading="treeLoading">
      <avue-tree :option="treeOption" :data="treeData" @node-click="handleTreeClick" style="height: calc(100% - 40px)"
        ref="treeRef" @save="handleTreeSave" @update="handleTreeUpdate" @del="handleTreeDel"></avue-tree>
    </el-aside>
    <el-main>
      <basic-crud v-model:formData="formData" v-model:search="searchFormData" :option="option" ref="basicCrudRef"
        :beforeOpen="handleBeforeOpen" businessUrl="/permission/userAptitudeController" :apiListParams="apiListParams"
        :apiAddParams="apiListParams">
      </basic-crud>
    </el-main>
  </el-container>
</template>

<script setup>
import { getCrudFunByBaseUrl } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
// 获取左侧树的增删改查接口
const { apiAdd, apiEdit, apiDel, apiRefer } = getCrudFunByBaseUrl('/bd/aptitudeController')
const searchFormData = ref({})
const basicCrudRef = ref()
const treeData = ref([])
const formData = ref({})
const treeOption = ref({
  defaultExpandAll: true,
  nodeKey: 'id',
  props: {
    label: 'name',
    value: 'id',
    children: 'children',
  },
  formOption: {
    column: [
      {
        label: '编号',
        prop: 'code',
        search: true,
        rules: [{ required: true, message: '请输入编号', trigger: 'blur' }],
      },
      {
        label: '名称',
        prop: 'name',
        search: true,
        sortable: true,
        rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      {
        label: '描述',
        prop: 'des',
      },
      {
        label: '排序',
        prop: 'orderNum',
        type: 'number',
        step: 10
      },
    ],
  }
})
const treeLoading = ref(true)
const handleTreeSave = (parent, data, done, loading) => {
  if (parent.key) {
    data.parentId = parent.key
  } else {
    data.parentId = 'root'
  }
  apiAdd(data).then(res => {
    ElMessage.success('新增成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}

const handleTreeUpdate = (parent, data, done, loading) => {
  apiEdit(data).then(res => {
    ElMessage.success('编辑成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}
const handleTreeDel = (data, done) => {
  const loadingInstance = ElLoading.service({ text: '删除中...' })
  apiDel(data.key).then(res => {
    ElMessage.success('删除成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  }).finally(() => {
    loadingInstance.close()
  })
}
// 获取树结构数据
const getTreeList = async () => {
  treeData.value = await apiRefer({}, treeLoading) || []
}

const treeRef = ref()
const apiListParams = ref({
  aptitudeId: undefined
})
const handleTreeClick = (data) => {
  basicCrudRef.value.pageData.currentPage = 1
  basicCrudRef.value.pageData.pageSize = 20
  apiListParams.value.aptitudeId = data.id
}
getTreeList()

const option = ref({
  menuWidth: 180,
  searchSpan: 8,
  selection: true,
  column: [
    {
      label: "用户姓名",
      prop: "userName",
      search: true,
      sortable: true,
      width: 150,
      display: false,
      formatter: (val) => {
        return val.userCode + " " + val.userName;
      }
    }, {
      label: "用户信息",
      type: 'select',
      prop: "userName",
      hide: true,
      component: 'BasicCrudTableSelect',
      // 内置参照名称
      dataType: 'user',
      width: 150,
      comProps: {
        saveFieldMap: { userName: 'name', userId: 'id', userCode: 'code' },
      },
      curForm: formData,
      change: (newV) => {
        formData.value = newV
      },
    },
    {
      label: "资质证书编号",
      type: "input",
      search: true,
      sortable: true,
      minWidth: 150,
      prop: "code",
      rules: [
        { required: true, message: "资质证书不能为空" }]
    },
    {
      label: "资质名称",
      type: "input",
      search: true,
      sortable: true,
      minWidth: 150,
      prop: "name",
      rules: [
        { required: true, message: "资质名称不能为空" }]
    },
    {
      prop: 'workContent',
      type: 'input',
      label: '工作内容',
      overHidden: true,
      minWidth: 100,
      span: 24
    },
    {
      label: "生效时间",
      type: "date",
      prop: "enableDate",
      sortable: true,
      span: 24,
      width: 120,
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      rules: [{ required: true, message: "生效时间不能为空" }],
    },
    {
      label: '过期时间',
      type: "date",
      search: true,
      searchType: 'daterange',
      sortable: true,
      display: false,
      prop: "disableDate",
      span: 24,
      width: 120,
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      searchSpan: 6,
    },
    {
      label: "颁发单位",
      prop: "publishUnit",
      search: true,
      sortable: true,
      width: 150,
      overHidden: true,
      span: 24,
    },
    {
      label: "有效周期",
      type: "number",
      prop: "invalidFeq",
      showColumn: false,
      value: 1,
      hide: true,
      rules: [{ type: 'number', message: "有效期必须是数字" },
      { required: true, message: "有效周期不能为空" }],
    },
    {
      prop: 'dateTypeEnum',
      type: 'select',
      label: '有效期类型',
      showColumn: false,
      hide: true,
      dicData: [{
        value: 'month',
        label: '月'
      }, {
        value: 'quarter',
        label: '季度'
      }, {
        value: 'year',
        label: '年'
      }],
      value: 'year',
      rules: [
        { required: true, message: "有效期类型不能为空" }],
    },
    {
      prop: 'status',
      type: 'select',
      label: '状态',
      display: false,
      search: true,
      width: 80,
      statusTag: true,
      statusTypeMap: {
        Enabled:'success',
        resign: 'info',
        advent: 'warning',
        Obsoleted: 'danger'
      }
    },
  ]
})

const handleBeforeOpen = (done, type, loading) => {
  if (!apiListParams.value.aptitudeId && type === 'add') {
    return ElMessage.warning('请选择左侧树节点进行操作！')
  }
  done()
}



</script>

<style lang="scss" scoped></style>
